<template>
	<view class="category-wrap">
		<!-- 返回首页 -->
		<uni-bankhome />
		<view class="navbar" :is-back="false">
			<u-search class="nav-search" disabled @click.native="search" placeholder="搜索商品" :show-action="false">
			</u-search>
		</view>
		<div class="nav-wrapper">
			<div class="nav-item" v-for="(item,index) in tabList" :key="item.id" @click="tabtapOne(item,index)">
				<div class="text" :class="{active:index==tabOne}">{{item.name}}</div>
			</div>
		</div>
		<view class="content">
			<scroll-view scroll-y scroll-with-animation class="left-aside">
				<view v-for="(item, index) in tabList[tabOne].children" :key="item.id" class="f-item b-b"
					:class="{ active: index==tabTwo }" @click="tabtap(item, index)">
					{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view scroll-with-animation scroll-y class="right-aside" :upper-threshold="-100"
				:lower-threshold="-100">
				<view class="t-list category-list">
					<!--  分类详情 -->
					<view v-for="item in categoryList" :key="item.id" @click="navigateToList(item)"
						class="t-item category-item" :class="{ 'margin-right': (cIndex + 1) % 3 == 0 }">
						<u-image width="70px" height="70px" :src="item.image" :lazy-load="true">
						</u-image>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getCategoryList
	} from "@/api/goods.js";
	export default {
		data() {
			return {
				tabOne: 0,
				tabTwo: 0,
				tabList: [], //左侧标题列表
				categoryList: [], //右侧分类数据列表
				topImg: "", //顶部图片
				index: '',
			};
		},
		async onLoad(options) {
			this.tabOne = parseInt(options.one)
			this.tabTwo = parseInt(options.two)
			this.loadData();
			// #ifdef MP-WEIXIN
			// 小程序默认分享
			uni.showShareMenu({
				withShareTicket: true
			});
			// #endif
		},

		methods: {
			/**
			 * 查询
			 */
			search() {
				uni.navigateTo({
					url: "/pages/search/goods",
				});
			},

			/**
			 * 加载图片
			 */
			async loadData() {
				let list = await getCategoryList(0);
				let result = list.data.result;
				this.tabList = result
				this.loadListContent(this.tabTwo)
			},

			/**
			 * 加载列表内容
			 */
			loadListContent(index) {
				this.categoryList = this.tabList[this.tabOne].children[index].children;

			},
			/**
			 * 一级分类点击
			 */
			tabtapOne(item, index) {
				this.tabOne = index;
				this.tabTwo = 0;
				this.loadListContent(0);
			},

			/**
			 * 二级分类点击
			 */
			tabtap(item, i) {
				if (this.tabTwo != i) {
					this.tabTwo = i;
					this.loadListContent(i);
					// this.$forceUpdate()
				}
			},

			navigateToList(item) {
				if (this.tabOne == 0) {
					uni.navigateTo({
						url: `/pages/search/store?category=${item.id}&name=${item.name}`,
					});
				} else {
					uni.navigateTo({
						url: `/pages/search/goods?category=${item.id}&name=${item.name}`,
					});
				}

			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #fdfaff;
	}

	/* 解决小程序和app滚动条的问题 */
	/* #ifdef MP-WEIXIN || APP-PLUS */
	::-webkit-scrollbar {
		display: none;
	}

	/* #endif */
	/* 解决H5 的问题 */
	/* #ifdef H5 */
	uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
	}

	/* #endif */
	.s-list {
		box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
	}

	.nav-search {
		padding-left: 30rpx !important;
		padding-right: 20rpx !important;
	}

	.title {
		display: block;
		width: 200rpx;
		text-align: center;
		font-size: 34rpx;
		letter-spacing: 2rpx;
		// #ifdef MP-WEIXIN
		margin-left: 26rpx;
		// #endif
	}

	.category-wrap {
		height: 100%;

		.navbar {
			width: 100%;
			background-color: #fff;
			padding: 0 45upx;
		}

		.nav-wrapper {
			display: flex;
			padding: 24upx;

			.nav-item {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				.text {
					height: 60upx;
					line-height: 60upx;

					&.active {
						border-bottom: 4upx solid $main-color;
						color: $main-color;
					}
				}
			}
		}

		.content {
			height: calc(100vh - 128upx);
			display: flex;
			color: #333;
			font-size: 28rpx;
			background: #fff;
		}

		.left-aside {
			flex-shrink: 0;
			width: 200rpx;
			height: 100%;
			background-color: #f7f7f7;
		}

		.f-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 97rpx;
			position: relative;

			&.active {
				font-weight: bold;
				color: $light-color;
				background: #fff;
			}
		}

		.right-aside {
			flex: 1;
			overflow: hidden;
			padding: 40rpx 0 140upx 30rpx;
		}

		.top-img {
			width: 500rpx;
			height: 230rpx;
			border-radius: 8px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.s-item {
			display: flex;
			align-items: center;
			height: 70rpx;
			padding-top: 16rpx;
			font-weight: 500;
		}

		.t-list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding-top: 12rpx;
		}

		.margin-right {
			margin-right: 0 !important;
		}

		.t-item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 150rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
			padding-bottom: 20rpx;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 8px;
				margin-bottom: 20rpx;
			}

			/deep/ .u-image {
				width: 140rpx !important;
				height: 140rpx !important;
				border-radius: 8px !important;
				margin-bottom: 20rpx !important;
			}
		}
	}

	.f-item:last-child {
		margin-bottom: 200rpx;
	}
</style>
